<template>
  <div class="infoContainer">
    <!-- 上传头像 -->
    <div class="left-avatar">
      <el-upload action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar grid-items" />
        <img v-else class="avatar grid-items"
          src="https://img1.baidu.com/it/u=2637332859,1407730126&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300" alt="" />
      </el-upload>
      <h4 class="grid-items">更换头像</h4>
      <p class="grid-items">头像仅支持.png/.jpg/.jpeg格式</p>
      <p class="grid-items">大小不能超过1MB</p>
    </div>

    <!-- 修改表单 -->
    <div class="edit-info">
      <el-form :model="formData" :rules="rules" status-icon ref="ruleFormRef" label-width="8rem">
        <!-- 姓名 -->
        <el-form-item prop="username" label="姓名">
          <el-input :model-value.trim="formData.username" placeholder="姓名" clearable>
          </el-input>
        </el-form-item>
        <!-- 角色 -->
        <el-form-item prop="role" label="角色">
          <el-input :model-value.trim="formData.role" placeholder="角色" clearable>
          </el-input>
        </el-form-item>
        <!-- 学院 -->
        <el-form-item prop="college" label="所属学院">
          <el-input :model-value.trim="formData.college" placeholder="学院" clearable>
          </el-input>
        </el-form-item>
        <!-- 专业 -->
        <el-form-item prop="major" label="专业">
          <el-input :model-value.trim="formData.major" placeholder="专业" clearable>
          </el-input>
        </el-form-item>
        <!-- 年级 -->
        <el-form-item prop="grade" label="年级">
          <el-input :model-value.trim="formData.grade" placeholder="年级" clearable>
          </el-input>
        </el-form-item>
        <!-- 手机 -->
        <el-form-item prop="phoneNumber" label="手机号码">
          <el-input :model-value.trim="formData.phoneNumber" placeholder="手机号码" clearable>
          </el-input>
        </el-form-item>
        <!-- 保存修改 -->
        <el-form-item>
          <el-button type="primary" class="w-full" @click="submitForm(ruleFormRef)"> 保存修改 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { UploadProps } from "element-plus";
// 表单相关
import { reactive, ref } from "vue";
// 路由
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";


const ruleFormRef = ref<FormInstance>()
// 头像上传相关代码————开始
const imageUrl = ref("");
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/png") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};
// 头像上传相关代码————结束

// 获取路由
const router = useRouter();

// 表单数据
const formData = reactive({
  username: "", // 姓名
  role: "", // 角色
  college: "", //所属学院
  major: "", // 专业
  grade: "", // 年级
  phoneNumber: 17899999999, // 手机号
});
const rules = reactive<FormRules>({
  username: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  role: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  college: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  major: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  grade: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  phoneNumber: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});

/**
 * 提交表单
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style lang="scss" scoped>
.infoContainer {
  width: 100%;
  height: 50rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;

  .left-avatar {
    place-self: center;
    display: grid;

    .avatar {
      width: 14.8rem;
      height: 14.8rem;
      border-radius: 100%;
    }

    .grid-items {
      place-self: center;
    }

    h4 {
      font-size: 1.6rem;
      height: 3rem;
      line-height: 3rem;
    }

    p {
      color: #999;
    }
  }

  .edit-info {
    place-self: center;
    justify-self: start;

    // 调整 form 表单相关样式
    .el-form {
      // 调整表单宽度
      width: 40rem;

      // 调整 item 项之间的间隔
      .el-form-item {
        margin-top: 2.5rem;
      }
    }
  }
}
</style>
